import React, { useEffect, useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  Pressable,
  Alert,
  Button,
} from "react-native";
import Icon from "react-native-vector-icons/FontAwesome";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import { loginApi } from "../../api/user";
import AsyncStorage from "@react-native-async-storage/async-storage";

type Props = {
  navigation: NativeStackNavigationProp<any>;
};

export default function Login({ navigation }: Props) {
  navigation.setOptions({
    headerRight: () => (
      <Button title="帮助" color={"#666"} onPress={() => {}} />
    ),
  });

  // 账号密码
  const [email, setEmail] = useState("2023403760@qq.com"); // 邮箱
  const [password, setPassword] = useState("88888888"); // 密码
  const [agreement, setAgreement] = useState(true); // 协议
  const [showPwd, setShowPwd] = useState(false); // 显示密码

  const [isOkLogin, setIsOkLogin] = useState(true);

  useEffect(() => {
    if (email && password && agreement) {
      setIsOkLogin(true);
    } else {
      setIsOkLogin(false);
    }
  }, [email, password, agreement]);

  async function login() {
    if (!isOkLogin) return;
    const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!pattern.test(email)) Alert.alert("邮箱格式错误");
    if (password.length < 8 || password.length > 18)
      Alert.alert("密码长度为8-18位字符");
    // 验证通过开始登陆

    const res = await loginApi({ email, password });
    console.log(res.code);
    if (res.code == 200) {
      const token = res.data;
      await AsyncStorage.setItem("token", token as string);
      Alert.alert("登陆成功", "", [
        {
          text: "确定",
          onPress: () => {
            navigation.navigate("Index",{
              screen: "Home",
            });
          },
        },
      ]);
    } else {
      Alert.alert(res.message);
    }
  }

  function gotoRegister() {
    navigation.navigate("Register");
  }
  return (
    <View style={styles.container}>
      <View style={styles.title}>
        <Text style={styles.tip}>账号密码登陆</Text>
        <Text style={styles.desc}>未注册的手机号登陆成功后将自动注册</Text>
      </View>
      <View style={styles.box}>
        <View style={styles.email}>
          <TextInput
            value={email}
            onChangeText={(text) => setEmail(text)}
            style={styles.emailInput}
            placeholder="请输入邮箱"
          ></TextInput>
        </View>
        <View style={styles.password}>
          <TextInput
            style={styles.passwordInput}
            placeholder="请输入密码"
            secureTextEntry={!showPwd}
            value={password}
            onChangeText={(text) => setPassword(text)}
          ></TextInput>
          <Pressable onPress={() => setShowPwd(!showPwd)}>
            {!showPwd ? (
              <Icon name="eye-slash" size={22} color="#333"></Icon>
            ) : (
              <Icon name="eye" size={22} color="#333"></Icon>
            )}
          </Pressable>
        </View>
        <View style={styles.forget}>
          <Pressable
            onPress={() => {
              gotoRegister();
            }}
          >
            <Text style={styles.forgetText}>注册账号</Text>
          </Pressable>
          <Pressable
            onPress={() => {
              Alert.alert("功能开发中...");
            }}
          >
            <Text style={styles.forgetText}>忘记密码?</Text>
          </Pressable>
        </View>
        <Pressable onPress={login}>
          <View
            style={[
              styles.login,
              { backgroundColor: isOkLogin ? "#12b886" : "#efefef" },
            ]}
          >
            <Text
              style={[styles.loginText, { color: isOkLogin ? "#fff" : "#999" }]}
            >
              登陆
            </Text>
          </View>
        </Pressable>
        <View style={styles.agreement}>
          <Pressable
            onPress={() => {
              setAgreement(!agreement);
            }}
          >
            {!agreement ? (
              <Icon name="circle-o" size={14} color="#ccc"></Icon>
            ) : (
              <Icon name="check-circle" size={14} color="#12b886"></Icon>
            )}
          </Pressable>

          <View style={styles.agreementText}>
            <Text style={[styles.agreementTextItem, { color: "#999" }]}>
              我已同意并阅读协议
            </Text>
            <Text style={[styles.agreementTextItem, { color: "#333" }]}>
              《用户协议》
            </Text>
            <Text style={[styles.agreementTextItem, { color: "#333" }]}>
              《隐私政策》
            </Text>
          </View>
        </View>
      </View>
      <View></View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // justifyContent: 'center',
    // alignItems: 'center',
    backgroundColor: "#fff",
  },
  title: {
    justifyContent: "center",
    alignItems: "center",
  },
  tip: {
    fontSize: 20,
    fontWeight: "bold",
    color: "#000",
    paddingTop: 10,
    paddingBottom: 10,
  },
  desc: {
    fontSize: 12,
    color: "#999",
  },
  box: {
    padding: 30,
  },
  email: {
    borderBottomWidth: 1,
    borderBottomColor: "#efefef",
    paddingBottom: 10,
    marginBottom: 10,
  },
  emailInput: {
    fontSize: 16,
    color: "#000",
  },
  password: {
    borderBottomWidth: 1,
    borderBottomColor: "#efefef",
    paddingBottom: 10,
    marginBottom: 10,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  passwordInput: {
    fontSize: 16,
    color: "#000",
    height: 32,
    flex: 1,
  },
  forget: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "flex-end",
  },
  forgetText: {
    fontSize: 13,
    color: "#333",
    marginTop: 4,
    paddingBottom: 4,
  },
  login: {
    backgroundColor: "#efefef",
    height: 44,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 20,
    marginTop: 10,
  },
  loginText: {
    fontSize: 16,
    color: "#999",
    fontWeight: "bold",
  },
  agreement: {
    marginTop: 10,
    flexDirection: "row",
    alignItems: "center",
  },
  agreementText: {
    flexDirection: "row",
  },
  agreementTextItem: {
    fontSize: 13,
    marginRight: 8,
  },
});
